<!--租客签约账单预览对话框-->
<template>
	<a-modal v-bind="option" class="renter-bill-preview-dialog">
		<div class="bill-table-wrapper">
			<vxe-table :data="list" v-bind="billTableOption" class="bill-preview-table">
				<vxe-column type="expand" title="房间地址" min-width="300" align="left">
					<template #default="{row}">{{ row.address }}</template>
					<template #content="{row}">
						<vxe-table :data="row.bill" :show-header="false">
							<vxe-column width="65">
								<template #default="{row: detail}">
									<svg-icon :icon-class="`finance-${detail.feeDirection == 1 ? 'in' : 'out'}`" />
									<span v-if="detail.feeDirection === 1" v-color="{color: 'primary'}">&nbsp;收</span>
									<span v-else v-color="{color: 'danger'}">&nbsp;付</span>
								</template>
							</vxe-column>
							<vxe-column min-width="200">
								<template #default="{row: detail}">
									{{ detail.feeSubjectName }}:
									<span v-color="{color: 'primary'}">{{ detail.amount.toLocaleString() }}</span>
									元
								</template>
							</vxe-column>
							<vxe-column width="180">
								<template #default="{row}">付款日期:{{ row.payDate }}</template>
							</vxe-column>
							<vxe-column width="280">
								<template #default="{row}">费用周期:{{ row.beginDate }}至{{ row.endDate }}</template>
							</vxe-column>
						</vxe-table>
					</template>
				</vxe-column>

				<vxe-column title="账单周期" min-width="200" align="center">
					<template #default="{row}">{{ row.quiteDate }}~{{ row.quiteDate }}</template>
				</vxe-column>

				<vxe-column field="price" title="应收（付）/已收（付）" min-width="100" align="right"></vxe-column>

				<vxe-column field="total" title="待收（付）" min-width="100" align="right">
					<template #default="{row}">{{ row.total }}元</template>
				</vxe-column>

				<vxe-column field="quiteDate" title="应收（付）日期" min-width="100" align="center"></vxe-column>

				<vxe-column title="操作" width="100" align="center">
					<template #default="{row}">
						<a>明细</a>
					</template>
				</vxe-column>
			</vxe-table>
		</div>
		<template #footer>
			<a-button type="primary" :loading="loadings.save" :disabled="loadings.calc" @click="submit">保存</a-button>
		</template>
	</a-modal>
</template>

<script lang="ts" setup>
	import {computed, reactive, ref, toRaw, toRef, watch} from 'vue'
	import {VxeTableProps, VxeTablePropTypes} from 'vxe-table'

	const props = defineProps<{
		visible: boolean
		contract: any
		returnCostSide?: any
	}>()

	const loadings = reactive({
		calc: false,
		save: false
	})

	const emits = defineEmits(['update:visible', 'success'])
	const option = reactive({
		width: 1100,
		title: '账单预览',
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			list.value = []
			allTotal.value = 0
			quiteDate.value = null
			emits('update:visible', false)
		}
	})

	// 账单列表
	const list = ref<any[]>([])
	const allTotal = ref<any>(0)
	const quiteDate = ref<any>()

	watch(
		() => props.visible,
		() => {
			if (props.visible) {
				// 前端计算账单 预览 以房间为单位 地址，账单明细[]，账单周期，应收（付）/已收（付，应收（付）日期
				let contract = JSON.parse(JSON.stringify(props.contract))
				// 因为账单是二维数组 现铺平
				let finances = contract.finances.flat(Infinity)
				console.log(finances)
				list.value = contract.houseRoomDTOList.map((i: any) => {
					// eslint-disable-next-line
					let bill: any = []

					// 计算总应收（付）/已收（付 in out
					// eslint-disable-next-line
					let total = 0
					// eslint-disable-next-line
					finances.forEach((j: any) => {
						if (j.houseId === i.id) {
							bill.push(j)
							if (j.feeDirection === 1) {
								total += j.amount * 1
							} else {
								total -= j.amount * 1
							}
						}
					})
					total = Number(total.toFixed(2))
					allTotal.value += total

					return {
						address: i.fullAddress,
						price: total + '元/0元',
						total,
						bill,
						quiteDate: contract.quiteDate
					}
				})

				allTotal.value = allTotal.value.toFixed(2)
				quiteDate.value = contract.quiteDate
			}
		}
	)

	const footerMethod: VxeTablePropTypes.FooterMethod = () => {
		// 返回一个二维数组的表尾合计
		return [['合计', '', allTotal.value + '元/0元', allTotal.value + '元', quiteDate.value, '-']]
	}

	const billTableOption = reactive<VxeTableProps>({
		size: 'medium',
		rowConfig: {
			isHover: true
		},
		expandConfig: {
			trigger: 'row',
			showIcon: false
		},
		showFooter: true,
		footerMethod: footerMethod
	})

	const submit = () => {
		emits('success', list.value)
		option.onCancel()
	}
</script>

<style lang="less">
	.renter-bill-preview-dialog {
		.ant-modal-body {
			padding: 0;
			overflow: auto;
			height: 550px;
			position: relative;

			.vxe-toolbar {
				height: 50px;
				border-bottom: 1px solid @border-color-light;
			}

			.bill-table-wrapper {
				padding: 12px;

				.ant-typography:first-of-type blockquote {
					margin-top: 0;
				}

				.bill-preview-table {
					.vxe-body--expanded-column {
						border: none;

						.vxe-table--body-wrapper {
							margin-top: -1px;
							background: rgba(@primary-color, 0.05);

							.vxe-body--column {
								vertical-align: baseline;
							}
						}

						.svg-icon {
							width: 24px;
						}

						.bill-carry-forward-tips {
							left: 4px;
							position: relative;

							&:before {
								content: '';
								width: 8px;
								height: 8px;
								top: 6px;
								left: -4px;
								display: inline-block;
								position: absolute;
								transform: rotate(45deg);
								border: 1px solid transparent;
								background-color: inherit;
								border-left-color: inherit;
								border-bottom-color: inherit;
								border-radius: @border-radius-base;
							}
						}
					}
				}
			}
		}
	}
</style>
